<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Message') }}
        </h2>
    </x-slot>

    <div class="container mx-auto p-4">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold">查看留言</h1>
            <a href="{{ route('messageboard.list') }}" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
                返回列表
            </a>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-md">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/{{ $message->user_id }}/40/40" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <h3 class="font-semibold text-gray-800">{{ $message->user->name }}</h3>
                    <p class="text-sm text-gray-500">{{ $message->created_at->format('Y-m-d H:i') }}</p>
                </div>
            </div>

            <h2 class="text-2xl font-bold mb-4">{{ $message->title }}</h2>
            <p class="text-gray-700 mb-6 whitespace-pre-line">{{ $message->content }}</p>

            <!-- 代码做了简化,并且让管理员都能删除和修改所有的留言,更优化的方法为权限命名规范,将按钮封装为Blade组件 -->
            @php
                $canEdit = auth()->user()->can('do any thing') || auth()->id() === $message->user_id;
                $canDelete = $canEdit;
            @endphp

            @if($canEdit || $canDelete)
                <div class="flex space-x-4">
                    @if($canEdit)
                        <a href="{{ route('messageboard.edit', $message) }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">编辑</a>
                    @endif

                    @if($canDelete)
                        <form action="{{ route('messageboard.destroy', $message) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700" onclick="return confirm('确定要删除这条留言吗？')">删除</button>
                        </form>
                    @endif
                </div>
            @endif
        </div>
    </div>
</x-app-layout>